/**
 * 一、JSX的概念
 * React中通过JSX来实现声明式语法的，JSX认为他是javascript和XML的集合体，也就是说相当于在JS中书写XML/HTML结构
 * JSX最终会被编译成React.createElement的方式来实现虚拟DOM的实现，通过babel.js插件的方式来将其JSX转成React.createElement
 * JSX的出现出现的原因是为了解决程序员编写大量的React.createElement中方式来创建虚拟DOM
 * JSX----------babel--------->React.createElement()
 * 二、虚拟DOM的创建有两种方式
 * 1）JSX(广泛使用)
 * 2）React.createElement方式（偶尔使用）
 * 三、使用JSX的语法
 * 1、胡子语法:{变量}
 * 2、JSX中定义变量写法
 * 3、表达式
 *  1）算数运算符
 *  2）三元表达式
 * 4、函数或者函数表达式
 * 5、对象的渲染
 *  
*/
import React from 'react'
import {getBirthday} from '@/utils/dateUtil'
export default function App(){
    //定义一个变量的语法:let 变量名=初始值
    let name="Jerry"
    let age=39
    let avatar="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffe478cdb-59fe-46db-9727-4a93d7ee5de2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700725011&t=898a292415bd151bb6c01b62c103b2ea"
    let idcard="610122198809087898" 
    let phone={
        name:'Iphone7Plus',
        color:['土豪金','玫瑰金'],
        network:['4G','5G']
    }   
    return <div>
        <div>姓名:{name}</div>
        <div>年龄:{age}</div>
        <div>虚岁:{age+1}</div>
        <div>生日:{getBirthday(idcard)}</div>
        <div>
            <img src={avatar} width={80} height={80}/>
        </div>
        <div>
            {JSON.stringify(phone)}
        </div>
        
    </div> 
}